<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="https://cdn.91haoka.cn/vant.css" />
		<link rel="stylesheet" href="https://static.91haoka.cn/all.css">
		<script src="https://cdn.91haoka.cn/vue.min.js"></script>
		<script src="https://cdn.91haoka.cn/vantall.js"></script>
		<script src="https://cdn.91haoka.cn/axios.min.js"></script>
	</head>
	<style>
		#app{ background: #fff; min-height: 100vh; width: 100vw;  font-size: 0.25rem;}
		img{ max-width: 100%; display: block;}
		.flex{ display: flex;}
		.flexc{ display: flex; align-items: center;}
		.flexbc{ display: flex; justify-content: space-between; align-items: center;}
		.flexcc{ display: flex; justify-content: center; align-items: center;}
		.yy{box-shadow: 0 0 0.1rem #eaeaea; padding: 0.2rem 0.3rem; margin-bottom: 0.3rem;}
		.act{ background: #ccc !important; color: #FFFFFF; padding: 0.1rem 0.2rem;  border-radius: 0.1rem;}
		.act1{ background: #fff; box-shadow: 0 0 0.1rem #eaeaea; padding: 0.1rem 0.2rem; margin-left: 0.2rem; border-radius: 0.1rem;}
	</style>
	<body>
		<div id="app">
			<div style="padding: 0.2rem 0.3rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
				<div style="position: absolute; left: 0.3rem; top: 0.2rem;"><img src="img/tx.webp" style="width: 0.5rem; height: 0.5rem;"></div>
				<div style="color: #fff;  font-weight: bold;">工作台</div>
			</div>
			<div style="padding: 0.3rem;">
				<div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">客户管理</div>
				<div class="flexcc">
					<div style="flex: 1;">
						<div class="flexcc" style="margin-bottom: 0.1rem;"><img src="img/1.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
						<div class="flexcc">客户</div>
					</div>
					<div style="flex: 1;">
						<div class="flexcc" style="margin-bottom: 0.1rem;"><img src="img/2.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
						<div class="flexcc">联系人</div>
					</div>
					<div style="flex: 1;">
						<div class="flexcc" style="margin-bottom: 0.1rem;"><img src="img/3.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
						<div class="flexcc">公海客户</div>
					</div>
				</div>
				<div style="font-weight: bold; margin-bottom: 0.2rem; font-size: 0.3rem;">销售管理</div>
				<div class="flexcc">
					<div style="flex: 1;">
						<div class="flexcc" style="margin-bottom: 0.1rem;"><img src="img/1.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
						<div class="flexcc">拜访</div>
					</div>
					<div style="flex: 1;">
						<div class="flexcc" style="margin-bottom: 0.1rem;"><img src="img/2.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
						<div class="flexcc">拜访审批</div>
					</div>
					<div style="flex: 1;">
						<div class="flexcc" style="margin-bottom: 0.1rem;"><img src="img/3.png" style="width: 0.8rem; border-radius: 0.4rem;"></div>
						<div class="flexcc">客户审批</div>
					</div>
				</div>
			</div>
			
		</div>
	</body>
	<script>
		var h = document.documentElement.clientWidth / 7.5 + 'px';
		    document.documentElement.style.fontSize = h;
		new Vue({
		    el: '#app',
		    data: function() {
		    	return {
					all:{},
					zhankai:false,
					sex:{
						xuanzhong:{
							name:"",
							value:""
						},
						log:false,
						list:[
							{value:1,name:'类型1'},
							{value:2,name:'类型2'}
						],
					},
					genjin:{
						xuanzhong:{
							name:"",
							value:""
						},
						log:false,
						list:[
							{value:1,name:'类型1'},
							{value:2,name:'类型2'}
						],
					},
					laiyuan:{
						xuanzhong:{
							name:"",
							value:""
						},
						log:false,
						list:[
							{value:1,name:'类型1'},
							{value:2,name:'类型2'}
						],
					},
					hangye:{
						xuanzhong:{
							name:"",
							value:""
						},
						log:false,
						list:[
							{value:1,name:'类型1'},
							{value:2,name:'类型2'}
						],
					},
					guimo:{
						xuanzhong:{
							name:"",
							value:""
						},
						log:false,
						list:[
							{value:1,name:'类型1'},
							{value:2,name:'类型2'}
						],
					},
		        }
		    },
		    created(){
		       
		    },
		    mounted () {
		 
		    },
		    methods:{
				// @confirm="sexConfirm" @cancel="sexCancel"  @change="sexChange"
				sexConfirm:function(val){
					
					this.sex.xuanzhong = val
					console.log(this.sex.xuanzhong)
					this.sex.log = false
				},
				sexCancel:function(val){
					console.log(val)
				},
				sexChange:function(val){
					console.log(val)
				},
				genjinConfirm:function(val){
					
					this.sex.xuanzhong = val
					console.log(this.sex.xuanzhong)
					this.sex.log = false
				},
				genjinCancel:function(val){
					console.log(val)
				},
				genjinChange:function(val){
					console.log(val)
				},
				laiyuanConfirm:function(val){
					
					this.sex.xuanzhong = val
					console.log(this.sex.xuanzhong)
					this.sex.log = false
				},
				laiyuanCancel:function(val){
					console.log(val)
				},
				laiyuanChange:function(val){
					console.log(val)
				},
				hangyeConfirm:function(val){
					this.sex.xuanzhong = val
					console.log(this.sex.xuanzhong)
					this.sex.log = false
				},
				hangyeCancel:function(val){
					console.log(val)
				},
				hangyeChange:function(val){
					console.log(val)
				},
				guimoConfirm:function(val){
					this.sex.xuanzhong = val
					console.log(this.sex.xuanzhong)
					this.sex.log = false
				},
				guimoCancel:function(val){
					console.log(val)
				},
				guimoChange:function(val){
					console.log(val)
				}
		    },
		})
		
	</script>
</html>